<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <div style="padding: 10px;background-color: white;width: 100%">

      <Tabs type="card" @change="tabChange">
        <TabPane key="1" class="vxe-row">
          <template #tab>
            <span>基本信息</span>
          </template>
          <div style="border-top: 1px solid #cccccc;border-right: 1px solid #cccccc; ">
            <Row>
              <Col :span="12" class="zitem">
                <div class="zitem-title"><span style="color: red">* </span>流程主题</div>
                <div class="zitem-input">
                  <vxe-input v-model="vform.data.name" />
                </div>
              </Col>
              <Col :span="12" class="zitem">
                <div class="zitem-title">所属模板</div>
                <div class="zitem-input">
                  {{ vform.data.temna }}
                </div>
              </Col>
            </Row>
            <Row>
              <Col :span="24">
                <div class="zitem">
                  <div class="zitem-title"><span style="color: red">* </span>流程备注</div>
                  <div class="zitem-input">
                    <vxe-textarea v-model="vform.data.notes" placeholder="请输入备注"
                                  :autosize="{minRows: 4, maxRows: 6}"></vxe-textarea>
                  </div>
                </div>
              </Col>
            </Row>
          </div>


        </TabPane>

        <TabPane key="2" class="vxe-row">
          <template #tab>
            <span>审批内容</span>
          </template>
          待开发
        </TabPane>

        <TabPane key="3" class="vxe-row">
          <template #tab>
            <span>流程处理</span>
          </template>
          <!--<WfDemo2 ref="xFlow" />-->
          <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
            <div id="modeler-container" style="height: 100%;width: 100%;cursor: pointer">
            </div>
            <!--            <Modeler2 @bpmnMounted="bpmnMounted"/>-->
            <!--            <Panel />-->
            <!--            <BpmnActions />-->
          </PageWrapper>
        </TabPane>

        <TabPane key="4" class="vxe-row">
          <template #tab>
            <span>权限信息</span>
          </template>
          这个也待开发
        </TabPane>

        <template #rightExtra>
          <vxe-button @click="handleSubmit()" status="primary">提 交</vxe-button>
        </template>
      </Tabs>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
export default { name: "WfTemMainEdit", inheritAttrs: false, customOptions: {} };
</script>
<script lang="ts" setup>
import '/@/comps/Activiti/Modeler/modeler.css';
import { PageWrapper } from "/@/components/Page";
import { ref, computed, reactive, toRaw, onMounted } from "vue";
import { Row, Col, Tabs, TabPane } from "ant-design-vue";
import { defHttp } from "/@/utils/http/axios";
import WfDemo2 from "/@/pages/wf/demo2/index.vue";
import { useTabs } from "/@/hooks/web/useTabs";
import Modeler2 from "/@/comps/Activiti/Modeler2";
import Panel from "/@/comps/Activiti/panel";
import BpmnActions from "/@/comps/Activiti/bpmn-actions";
import { BpmnStore } from "/@/comps/Activiti/Bpmn/store";
import Viewer from "bpmn-js/lib/NavigatedViewer";

import { useRoute } from "vue-router";

const route = useRoute();
const id = ref(route.params?.id).value;
const temid = ref(route.query?.temid).value;

async function init() {
  if (temid) {
    const cate = await defHttp.get({ url: "/wf/tem/main/one/" + temid });
    vform.data.temna = cate.name;
    vform.data.temid = cate.id;
  }
  // vform.data.cate={id:cate.id,name:cate.name};

}

async function fetch() {
  vform.data = await defHttp.get({ url: "/wf/ins/main/one/" + id });
  // console.log(vform.data.xml);

  // console.log(vform.data);
}

// async function bpmnMounted() {
//   const tem = await defHttp.get({ url: "/wf/tem/main/one/" + vform.data.temid });
//   if (tem.xml != null) {
//     await BpmnStore.importXML(tem.xml);
//   }
// }


let bpmnShowFlag=false;
async function tabChange(key) {
  if (key == 3&&!bpmnShowFlag) {
    setTimeout( async()=>{
      const tem = await defHttp.get({ url: "/wf/tem/main/one/" + vform.data.temid });
      const bpmnViewer = new Viewer({
        container: "#modeler-container"
      }) as any;
      try {
        const { warnings } = await bpmnViewer.importXML(tem.xml);
        // bpmnViewer.get("canvas").zoom("fit-viewport", "auto");
        console.log("rendered");
      } catch (err) {
        console.log("error rendering", err);
      }
      bpmnShowFlag=true;
    }, 150);

    // await BpmnStore.importXML(vform.data.xml);
  }
}


onMounted(() => {
  if (id == "new") {
    init();
  } else {
    fetch();
  }
});

const xTree = ref({} as any);
const emit = defineEmits(["success", "register"]);
const { closeCurrent } = useTabs();

const vform = reactive({
  url: "/wf/ins/main",
  data: {} as any
});

// const xFlow = ref({} as any);

async function handleSubmit() {

  const bpmn = await BpmnStore.getXML();
  // console.log(bpmn.xml);
  // console.log(typeof (bpmn.xml));
  // xFlow.value.getData();
  vform.data.xml = bpmn.xml;

  if (vform.data["id"]) {
    await defHttp.put({ url: vform.url, data: vform.data });
  } else {
    await defHttp.post({ url: vform.url, data: vform.data });
  }
  await closeCurrent();
}


function TemSelect(data) {
  vform.data.tem = data;
  if (data != null) {
    vform.data.temna = data.name;
    vform.data.temid = data.id;
  } else {
    vform.data.temna = null;
    vform.data.temid = null;
  }
}


</script>

<style>
.zitem {
  display: table;
  width: 100%;
  height: 41px;
}

.zitem-title {
  display: table-cell;
  border-left: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 6px;
  background-color: #f6f6f6;
  text-align: right;
  width: 180px;
  min-width: 180px;
  vertical-align: middle;
}

.zitem-input {
  display: table-cell;
  border-left: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 4px;
  vertical-align: middle;
}

.zitem-input .vxe-input {
  width: 100%;
}

.zitem-input .vxe-textarea--inner {
  margin-bottom: -6px;
}

</style>
